<template>
    <!-- 顶部内容, 书写在这里, 通过传送门(teleporter) 放在顶部内 -->
    <teleport to=".header">
      <SdyHeader center="search" />
    </teleport>
  
    <van-list
      v-model:loading="loading"
      :finished="false"
      finished-text="没有更多了">
      <div >
        <div class="liebiao" @click="$myRouter.push({ path: '/detail', query: { proid: item.proid } })" v-for="item in goodsList" >
            <div class="left">
                <img :src="item.img2" alt="">
            </div>
            <div class="right">
                <p>{{ item.proname }}</p>
                <span>￥{{ item.originprice }}</span>
                <p class="a">京东特卖店&gt;</p>
            </div>
        </div>
      </div>
    </van-list>
  </template>
  
  <script name="sdyList" lang="ts" setup>
  import SdyHeader from '../../components/header.vue'
  import { useRoute, useRouter } from 'vue-router'
  import { ref, onMounted } from 'vue'
  import { getSearchList } from '../../model/goods'
  
  // 拿到路由传递来的信息
  const $myRoute = useRoute()
  const $myRouter = useRouter()

  interface GoodsItem {
  proid: string;
  img2: string;
  proname: string;
  originprice: number;
}
  // 准备一个变量, 表示商品列表
const goodsList = ref<GoodsItem[]>([]);
  
  const loading = ref<boolean>(true)
  
  // 根据关键字发送请求
  const getGoodsList = async () => {
    const keyword = $myRoute.query.keyword as string
    const res = await getSearchList(keyword)
    if ((res as any).code !== '200') return
    goodsList.value = res.data
    console.log(res)
  }
  
  onMounted(() => {
    getGoodsList()
  })
  
  </script>
  
  <style scoped lang="scss">
    .liebiao{
        .right{
            flex: 1;
            
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 5px;
            height: 100px;
            overflow: hidden;
            p{
                margin-bottom: 10px;
                height: 30px;
                font-size: 10px;
                overflow: hidden;
            }
            span{
                color: red;
                margin-bottom: 10px;
            }
            .a{
                font-size: 12px;
                color: #ccc;
                margin-bottom: 0;
            }
        }
        .left{
            width: 30%;
            height: 100px;
            
            img{
                width: 100px;
            }
        }
        width: 100%;
        box-sizing: border-box;
        padding: 5px 30px;
        display: flex;
        justify-content: space-between;
        margin-top: 10px;

    }
</style>
  